<template>
  <div>
    <!-- 按钮 v-btnDirective='role' -->
    <el-button type="primary" @click="addadminFn" v-btnDirective='role'>
      添加管理员
      <el-icon class="el-icon--right">
        <Plus />
      </el-icon>
    </el-button>
    <!-- 表格 -->
    <el-table :data="currentPageData" style="width: 100%" class="table">
      <!-- 序号 -->
      <el-table-column label="序号" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 姓名 -->
      <el-table-column label="姓名">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.adminname }}</span>
        </template>
      </el-table-column>
      <!-- 权限 -->
      <el-table-column label="权限">
        <template #default="scope">
          <el-tag class="ml-2" :type="scope.row.role == 1 ? '' : 'success'">
            {{ scope.row.role == 1 ? "管理员" : "超级管理员" }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" direction="rtl" title="添加管理员">
      <!-- 抽屉de表单 -->
      <template #default>
        <el-form :model="ruleForm" label-width="60px" :rules='rules'>
          <el-form-item label="姓名" prop="adminname">
            <el-input v-model="ruleForm.adminname" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-select v-model="ruleForm.role" placeholder="请选择角色">
              <el-option label="管理员" value="1" />
              <el-option label="超级管理员" value="2" />
            </el-select>
          </el-form-item>
          <!-- 抽屉de树形菜单 -->
          <el-form-item>
            <el-tree
              ref="treeRef"
              :data="treeData"
              show-checkbox
              default-expand-all
              node-key="path"
              highlight-current
              :props="defaultProps"
              :default-checked-keys='defaultcheckedkeys'
            />
          </el-form-item>
        </el-form>
      </template>
      <!-- 抽屉de底部按钮 -->
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmAdd" v-if='btn==1'>添加</el-button>
          <el-button type="primary" @click="confirmEdit" v-if='btn==2'>编辑</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" v-model:current-page='currentPage' :total="tableData.length" class='page' />
  </div>
</template>

<script>
// 引入图标
import { Plus } from "@element-plus/icons-vue";
// 导入各种接口，（获取管理员列表，添加管理员,编辑管理员信息,删除管理员）
import { adminList, addAdmin , updataAdmin ,deleteAdmin } from "@/api/http";
// 导入router,用路由中的内容展示树形菜单
import router from "@/router/index.js";
// 引入lodash,深克隆
import {cloneDeep} from 'lodash'
// 通过辅助函数获取vuex 中登录时存储的role(当前用户的角色)
import { mapState } from 'vuex'

export default {
  data() {
    return {
      //需要渲染的管理员列表数据
      tableData: [], 
      //是否拉开抽屉
      drawer: false,       
      // 抽屉按钮的切换，默认
      btn:1,
      // 当前页数，默认
      currentPage:1,
      // 树形菜单，默认选中的数据集合
      defaultcheckedkeys:[],
      // 管理员所有数据
      ruleForm: {
        adminname: "",
        password: "",
        role: "",
        checkedKeys: [],
      },
      // 输入框的正则
      rules: {
        adminname: [{ required: true, message: "请输入用户名", trigger: "blur" },],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },

  // 注册组件
  components: {
    Plus,
  },

  created() {
    // 获取管理员列表请求
    this.getadminList()
  },

  computed: {
    // 获取仓库中的role，用于控制按钮权限
    ...mapState(['role']),
    // 获取树形菜单的数据，从路由拿
    treeData() {
      // 因为点击添加轮播图的时候，添加了新路由，再拉开抽屉会多一个
      // 解决：克隆新路由，删除添加轮播图的路由，再渲染
      // 下载新工具包lodash，样式穿透
      let newRoute = cloneDeep(router.options.routes[2].children)
      newRoute[1].children.pop()
      return newRoute;
    },
    // 分页
    currentPageData(){
      return this.tableData.slice((this.currentPage-1)*10,this.currentPage*10)
    }
  },

  // 监听
  watch:{
    btn(newvalue){
      if(newvalue==1){
        this.rules.adminname[0].required = true
      }else{
        this.rules.adminname[0].required = false
      }
    }
  },

  methods: {
    // 封装函数，获取树形菜单的选中数据数组
    getTree(){
      // **************重点（获取选中的权限，嵌套的）***************//
      // 思路：先找到有子菜单的父菜单，取它的名字和地址，再把子菜单变成数组加进去
      // 定义空数组，用来缓存选中的父子菜单
      let cache = [];
      // 定义传参的数据数组
      let deliver = [];
      const childrenList = this.$refs.treeRef.getCheckedNodes(true);
      const family = this.treeData;
      // 遍历每个选中的子菜单
      childrenList.forEach((child1) => {
        // 遍历所有父菜单
        const father = family.find((child2) => {
          return child2.children.some((item) => item.label == child1.label);
        });
        // 如果没有父菜单的名字，就传进去名字，路径和第一个子菜单
        if (!cache.includes(father.label)) {
          cache.push(father.label);
          deliver.push({
            label: father.label,
            path: father.path,
            children: [child1],
          });
        } else {
          //如果有父菜单名字，就给子菜单传后面的子菜单
          // 因为if，只要有这个名字就不push，所以当父菜单中有多个子菜单时，只有第一个子菜单可以push
          deliver.find((item) => item.label == father.label).children.push(child1);
        }
      });
      this.ruleForm.checkedKeys = deliver;
    },
    
    // 获取管理员列表
    getadminList(){
      adminList().then((res) => {
        this.tableData = res.data.data; //只剩数据列表
      });
    },

    // 点击添加管理员，清空数据，打开抽屉
    addadminFn() {
      this.ruleForm.adminname=''
      this.ruleForm.password=''
      this.ruleForm.role=''
      if(this.$refs.treeRef){
        this.$refs.treeRef.setCheckedKeys([])
      }
      this.drawer = true;
      //改抽屉的按钮为添加
      this.btn=1
    },

    //抽屉中的添加，将接口所需的数据全都获取到
    confirmAdd() {
      console.log(this.$refs.treeRef, "获取子组件的实例对象");
      console.log(this.$refs.treeRef.getCheckedNodes(true),"true为选中的子菜单");
      console.log(this.treeData, "所有父子菜单");
      // 获取树形菜单选中数据
      this.getTree()
      // 校验数据不为空的时候，调接口，传数据
      if (
        this.ruleForm.adminname != "" &&
        this.ruleForm.password != "" &&
        this.ruleForm.role != "" &&
        this.ruleForm.checkedKeys.length != 0
      ) {
        console.log(11111);
        addAdmin(this.ruleForm).then((res) => {
          if (res.data.code == 200) {
            // 重新获取管理员列表
            this.getadminList()
            // 关闭抽屉
            this.drawer = false
          }
        });
      }
    },

    // 点击编辑
    handleEdit(index,row) {
      console.log(index,row,'编辑中的index,row')//下标和被点击人的所有数据
      // 01-打开抽屉
      this.drawer = true
      // 02-信息回填
      this.ruleForm.adminname = row.adminname
      this.ruleForm.password = row.password
      this.ruleForm.role = row.role
      let backfill = []
      row.checkedKeys.forEach(item=>{
        item.children.forEach(item1=>{
          backfill.push(item1.path)
        })
      })
      // 先清空再传数据！！！！
      if(this.$refs.treeRef){
        this.$refs.treeRef.setCheckedKeys([])
      }
      //将值给到默认勾选的节点的 key 的数组
      this.defaultcheckedkeys = backfill
      //改抽屉的按钮为编辑
      this.btn=2
    },

    // 抽屉里的编辑
    confirmEdit(){
      // 01-获取树形菜单选中数据
      this.getTree()
      // 02-校验不能为空
      if (this.ruleForm.adminname != '' && this.ruleForm.password != '' &&this.ruleForm.role != '' && this.ruleForm.checkedKeys.length != 0){
        // 03-调用编辑接口
        updataAdmin(this.ruleForm).then(res=>{
          if(res.data.code==200){
            // 关闭抽屉
            this.drawer = false
            // 重新获取管理员列表
            this.getadminList()
          }
        })
      }
    },

    // 删除
    handleDelete(inndex,row) {
      deleteAdmin({ adminid: row.adminid }).then(res=>{
        if (res.data.code == 200) {
          // 重新获取管理员列表
          this.getadminList()
        }
      })
    },
    // 抽屉中的取消
    cancelClick() {
      // 关闭抽屉
      this.drawer = false
    },
  },
};
</script>

<style scoped>
.page{
  margin-top: 20px;
  padding-bottom: 30px;
  float: right;
  margin-right: 20px;
}
.table{
  margin-top: 20px;
}
</style>